<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" th:href="@{/}+'layuiadmin/style/admin.css'" media="all">
<link rel="stylesheet" href="js/zTree/css/zTreeStyle/zTreeStyle.css" media="all">
<script type="text/javascript" src="js/zTree/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
      <div class="layui-row">
    <div class="layui-col-md2">
       <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="layui-col-md10">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn" id="refreshData">更新数据</button>
  </div>
      <table id="district-table" lay-filter="district-table"></table>
    </div>
  </div>
    </div>
  </div>
</div>

<script th:inline="none">

layui.use(['table', 'tree','form'], function(){
  var admin = layui.admin
  ,table = layui.table
  ,form = layui.form;
  
  var treeSetting = {
		async: {
			enable: true,
			url: "district/getDistrictTree",
			autoParam:["id=pid"]
		},
		view:{
			showTitle: true,
			selectedMulti : false
		},callback:{
			
			onClick: function(event,treeId,node){
				var whr = {parentCode:node.id};
				table.reload('district-table',{
					loading:true,
					where: whr
					,page: {
						 curr: 1 //重新从第 1 页开始
					}
				});				
			}
		}
	};
	$.fn.zTree.init($("#treeDemo"), treeSetting);
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	  function refreshNode(){
		  var selectedNodes = treeObj.getSelectedNodes();
		  if( selectedNodes.length==0){
			  treeObj.reAsyncChildNodes(null, "refresh");
		  }else{
			  $.ajax({
				  url: "district/getChildCount",
				  type:'POST',
				  dataType:'JSON',
				  data:{id: selectedNodes[0].id},
				  success: function(ret){
					  selectedNodes[0].isParent = (ret.count > 0) ;
					  treeObj.reAsyncChildNodes(selectedNodes[0], "refresh");
				  }
			  })
			  
		  }
	}
    $("#refreshData").on("click",function(e){
    	layer.msg('正在后台更新数据，您可以离开该页面去忙其他的');
    	setInterval(function(){
    		table.reload('district-table');
			refreshNode();
    	},10000)
    	$.ajax({
    		url:"district/genDistrict",
    		type:'GET',
    		dataType:"json",
    		success:function(ret){
    			table.reload('district-table');
  			 	refreshNode();
  	          	layer.msg('更新完成');
    		}
    	})
    })
	table.render({
    elem: '#district-table'
    ,url: 'district/getSelfAndChildren' 
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', width: 100, title: 'ID',hide:true}
      ,{field: 'parentId', width: 100, title: '父ID',hide:true}
      ,{field: 'name', title: '区划名称', width:200}
      ,{field: 'shortName', title: '区划简称', width: 200}
      ,{field: 'pinyin', title: '拼音', width: 200}
      ,{field: 'code', title: '区划编码', width: 100}
      ,{field: 'lng', title: '经度', width: 120}
      ,{field: 'lat', title: '纬度', width: 120}
    ]]
    ,page: true
    ,limit: 30
    ,height: '700px'
    ,text: '对不起，加载出现异常！'
    ,done:function(){
        enableRowClick(table,form,'district-table',"district-table");
    }	
  });
  table.on("edit(org-table)",function(obj){
	 $.ajax({
		 url:'district/modify',
		 type:'POST',
		 data:obj.data,
		 dataType:'json',
		 success:function(ret){
			 layer.msg("保存成功",{icon:1});
			 refreshNode();
			 table.reload('navi-table'); 
		 }
	 })
  })
});
</script>
</body>